<template>
  <el-main>
    <el-card shadow="never" header="async-validator内置">
      <el-form
        ref="form"
        :model="form"
        :rules="rules"
        label-width="100px"
        status-icon
      >
        <el-form-item label="必填" prop="required">
          <el-input v-model="form.required"></el-input>
        </el-form-item>
        <el-form-item label="长度" prop="length">
          <el-input v-model="form.length" placeholder="长度需为3位"></el-input>
        </el-form-item>
        <el-form-item label="类型" prop="type">
          <el-input
            v-model="form.type"
            placeholder="类型可为string number boolean array date url email等"
          ></el-input>
        </el-form-item>
        <el-form-item label="范围" prop="range">
          <el-input
            v-model="form.range"
            placeholder="请填写范围在3至5位"
          ></el-input>
        </el-form-item>
        <el-form-item label="枚举" prop="enum">
          <el-input
            v-model="form.enum"
            placeholder="请填写admin，user，guest其一"
          ></el-input>
        </el-form-item>
        <el-form-item label="自定义" prop="custom">
          <el-input v-model="form.custom" placeholder="请填写数字1"></el-input>
        </el-form-item>
        <el-form-item label="异步验证" prop="async">
          <el-input
            v-model="form.async"
            placeholder="请输入SCUI最新版本号,form开启status-icon后 可以查看右侧状态"
          ></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit">验证所有字段</el-button>
          <el-button @click="resetForm('form')">Reset</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card shadow="never" header="自定义" style="margin-top: 15px">
      <el-form
        ref="form2"
        :model="form2"
        :rules="rules2"
        label-width="100px"
        status-icon
      >
        <el-form-item label="手机号码" prop="phone">
          <el-input v-model="form2.phone"></el-input>
        </el-form-item>
        <el-form-item label="车牌号码" prop="cars">
          <el-input v-model="form2.cars"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submit2">验证所有字段</el-button>
          <el-button @click="resetForm('form2')">Reset</el-button>
        </el-form-item>
      </el-form>
      <el-alert
        title="自定义验证可在 @/utils/verificate.js 中不断扩展业务需要的验证. 记得要 import 进来"
        type="success"
      />
    </el-card>
  </el-main>
</template>

<script>
import { verifyPhone, verifyCars } from "@/utils/verificate";

export default {
  name: "verificate",
  data() {
    return {
      form: {},
      rules: {
        required: [{ required: true, message: "请填写" }],
        length: [{ required: true, len: 3, message: "长度需为3位" }],
        type: [{ required: true, type: "email", message: "类型需为email" }],
        range: [{ required: true, min: 3, max: 5, message: "范围在3至5位" }],
        enum: [
          {
            required: true,
            type: "enum",
            enum: ["admin", "user", "guest"],
            message: "请填写admin，user，guest其一",
          },
        ],
        custom: [
          {
            required: true,
            validator: (rule, value) => {
              return value === "1";
            },
            message: "请填写数字1",
            trigger: "blur",
          },
        ],
        async: [
          {
            required: true,
            validator: (rule, value, callback) => {
              this.$API.demo.ver.get({ value: value }).then((res) => {
                if (res.data != value) {
                  return callback(
                    new Error("请输入SCUI最新版本号：" + res.data)
                  );
                }
                callback();
              });
            },
            trigger: "blur",
          },
        ],
      },
      form2: {},
      rules2: {
        phone: [
          { required: true, message: "请输入姓名" },
          { validator: verifyPhone, trigger: "blur" },
        ],
        cars: [{ required: true, validator: verifyCars, trigger: "blur" }],
      },
    };
  },
  mounted() {},
  methods: {
    submit() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          this.$message.success("全部验证通过");
        } else {
          return false;
        }
      });
    },
    submit2() {
      this.$refs.form2.validate(async (valid) => {
        if (valid) {
          this.$message.success("全部验证通过");
        } else {
          return false;
        }
      });
    },
    resetForm(ref) {
      this.$refs[ref].resetFields();
    },
  },
};
</script>

<style></style>
